<template>
    <!-- 菜单管理 -->
    <div class="menu" @click.self="close_inp">
        <div class="header">
            <a-button type="primary" @click="add_table"> 添加</a-button>

        </div>
        <a-table :columns="columns" :data-source="menuListTree" :row-key="(record: any) => record.menu_id">
            <!-- <template #expandedRowRender="{ record }">
                <p style="margin: 0">
                    {{ record.name }}
                </p>
            </template> -->
            <template #bodyCell="{ column, record }">
                <div v-if="column.key === 'contral'">
                    <a-button type="primary" @click="edit_table(record)">编辑</a-button>
                </div>
            </template>
        </a-table>


        <!-- <a-table :data-source="meunList" :row-key="(record: any) => record.menu_id">
            <template #expandedRowRender="{ record }">
                <p style="margin: 0">
                    {{ record.name }}
                </p>
            </template>
            <a-table-column key="name" title="菜单名称" data-index="name">
                <template #default="{ record }">
                    <div @dblclick="db_edit(record, 'name')" v-if="record.flag">{{ record.name }}</div>
                    <a-input @pressEnter="name_change(record)" v-else v-model:value="record.name" placeholder="请输入菜单名称" />
                </template>

            </a-table-column>
            <a-table-column key="sort" title="排序" data-index="sort">
                <template #default="{ record }">
                    <div @dblclick="db_edit(record, 'sort')" v-if="record.flag2">{{ record.sort }}</div>
                    <a-input @pressEnter="name_change(record)" v-else v-model:value="record.sort" placeholder="请输入菜单名称" />
                </template>
            </a-table-column>

            <a-table-column key="client_path" title="菜单路径" data-index="client_path">
                <template #default="{ record }">
                    <div @dblclick="db_edit(record, 'path')" v-if="record.flag1" style="width: 100%; height: 22px;">{{
                        record.client_path }}</div>
                    <a-input @pressEnter="name_change(record)" v-else v-model:value="record.client_path"
                        placeholder="请输入菜单名称" />
                </template>
            </a-table-column>
            <a-table-column key="operations" title="操作" data-index="operations">
                <template #default="{ record }">
                    <a-button type="link" @click="edit_table(record.menu_id)"> 编辑</a-button>
                    <a-popconfirm title="不好好想想?" ok-text="Yes" cancel-text="No"
                        @confirm="delete_table(record.menu_id)">
                        <a-button type="link"> 删除</a-button>
                    </a-popconfirm>

                </template>
            </a-table-column>
        </a-table> -->

        <!-- 添加弹框 -->
        <a-modal ref="modalRef" v-model:visible="add_visible" :wrap-style="{ overflow: 'hidden' }">

            <a-form :layout="'vertical'" :model="formState" name="basic" :label-col="{ span: 8 }"
                :wrapper-col="{ span: 24 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <a-form-item label="菜单名称" name="name" :rules="[{ required: true, message: '请输入菜单名称' }]">
                    <a-input v-model:value="formState.name" />
                </a-form-item>

                <a-form-item label="页面路径" name="client_path" :rules="[{ required: true, message: '请输入页面路径' }]">
                    <a-input v-model:value="formState.client_path" />
                </a-form-item>
                <a-form-item label="父级" name="pid" :rules="[{ required: true, message: '请选择父级' }]">
                    <a-input v-model:value="formState.pid" />
                </a-form-item>
                <a-form-item label="是否展示" name="status" :rules="[{ required: true, message: '是否展示' }]">
                    <a-input v-model:value="formState.status" />
                </a-form-item>


                <a-form-item :wrapper-col="{ offset: 8, span: 16 }">

                    <a-button type="primary" html-type="submit" v-if="is_edit">确认修改</a-button>
                    <a-button v-else type="primary" html-type="submit">添加</a-button>
                </a-form-item>
            </a-form>


            <template #footer> </template>
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">添加菜单</div>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted, reactive } from 'vue'
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { corsApi } from '../../request/http'
import { message } from 'ant-design-vue'

const store = useCounterStore()
const { meunList, menuListTree } = storeToRefs(store)
const { get_menu_list, get_menu_list_tree } = store

interface FormState {
    name: string,
    client_path: string,
    pid: string | number,
    status: string | number,
}

const columns = [
    {
        title: '菜单名称',
        dataIndex: 'name',
        key: 'name',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort',
    },
    {
        title: '路径',
        dataIndex: 'client_path',
        key: 'path',
    },
    {
        title: '操作',
        dataIndex: 'contral',
        key: 'contral',
    },

];
// 弹框
const add_visible = ref(false)
// 表单
const formState = reactive<FormState>({
    name: "",
    client_path: "",
    pid: "",
    status: "",
});

// 是否是编辑打开的弹窗
const is_edit = ref<boolean>(false)


// 页面初始化
onMounted(async () => {
    // if (meunList.value.length == 0) {
    //     await get_menu_list()
    // }
    if (menuListTree.value.length == 0) {
        await get_menu_list_tree()
    }
    // console.log(meunList.value);


    // await get_menu_list_tree()
})

// const menuListTree = ref<any>([])
// // 获取菜单树形结构
// const get_menu_list_tree = async () => {
//     const res = await corsApi('menu_tree', 'post', {})
//     console.log(res);
//     if (res.data.status === 1) {
//         menuListTree.value = res.data.result
//     }

// }


// 添加
const add_table = async () => {
    is_edit.value = false
    add_visible.value = true
}

const onFinish = async (values: any) => {
    console.log('Success:', values);


    if (is_edit.value) {
        let data = {
            ...formState,

        }
        const res = await corsApi('menu_update', 'post', data)
        console.log(res);
        if (res.data.status === 1) {
            message.success(res.data.message)
         
           
        }


    } else {
        const res = await corsApi('menu_add', 'POST', formState)
        if (res.data.status === 1) {
            message.success(res.data.message)
       
        }
    }

    get_menu_list_tree()
    add_visible.value = false
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);

};
// 添加弹框确认
const enter = async () => {

}
// 表格编辑
const edit_table = async (row) => {
    // console.log(id);
    console.log(row);
    is_edit.value = true
    formState.name = row.name
    formState.client_path = row.client_path
    formState.pid = row.pid
    formState.status = row.status
    formState.menu_id = row.menu_id

    add_visible.value = true

}
// 表格删除 
const delete_table = async (id: number) => {
    const res = await corsApi("menu_delete", "POST", { menu_id: id })
    console.log(res);
    if (res.data.status === 1) {
        message.success(res.data.message)
        get_menu_list()
    }
}


// 表格双击编辑
const db_edit = (row: any, type: string) => {
    console.log(row, type);
    meunList.value.forEach((element: any) => {
        element.flag = true
        element.flag1 = true
        element.flag2 = true
    });
    if (type === 'name') {
        row.flag = false
    } else if (type === 'path') {
        row.flag1 = false
    } else if (type === 'sort') {
        row.flag2 = false
    }
}

// 关闭input
const close_inp = () => {
    console.log('关闭inp');
    meunList.value.forEach((element: any) => {
        element.flag = true
        element.flag1 = true
        element.flag2 = true
    });
}

// 修改回车事件
const name_change = async (row: any) => {
    console.log(row);

    const res = await corsApi('menu_update', 'POST', {
        "menu_id": row.menu_id,
        "name": row.name,
        "pid": row.pid,
        "status": row.status,
        client_path: row.client_path,
        sort: row.sort,
    })
    console.log(res);
    if (res.data) {
        row.flag = true

        await get_menu_list()
    }

}



</script>

<style scoped lang="scss">
.menu {
    width: 100%;
    height: 100%;

    .header {
        padding-bottom: 15px;
    }

    .ant-form {
        :deep(.ant-col-16) {
            max-width: 100%;
        }

    }
}


.ant-modal-footer {
    display: none !important;
}
</style>

<style></style>